<template>
  <div class="components-container">
    <code>This is based on
      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
      {{ $t('components.imageUploadTips') }}
    </code>

    <pan-thumb :image="image"/>

    <el-button @click="imagecropperShow=true" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;"
               type="primary">
      Change Avatar
    </el-button>

    <image-cropper
      :height="300"
      :key="imagecropperKey"
      :width="300"
      @close="close"
      @crop-upload-success="cropSuccess"
      lang-type="en"
      url="https://httpbin.org/post"
      v-show="imagecropperShow"
    />
  </div>
</template>

<script>
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  export default {
    name: 'AvatarUploadDemo',
    components: {ImageCropper, PanThumb},
    data() {
      return {
        imagecropperShow: false,
        imagecropperKey: 0,
        image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
      }
    },
    methods: {
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.image = resData.files.avatar
      },
      close() {
        this.imagecropperShow = false
      }
    }
  }
</script>

<style scoped>
  .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
</style>

